<template>
  <div class="dropdown">
     <a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggleOpen">{{title}}</a>
     <ul class="dropdown-menu" :style="{display:'block'}" v-if="isOpen">
    <li><a class="dropdown-item" href="#">新建文章</a></li>
    <li><a class="dropdown-item" href="#">编辑资料</a></li>
    <a-button>Default Button</a-button>
  </ul>
  </div>
</template>

<script lang="ts">
 import {defineComponent,ref}  from  'vue'
 import Button from 'ant-design-vue/lib/date-picker'; // 加载 JS
import 'ant-design-vue/lib/date-picker/style/css'; // 加载 CSS
export default defineComponent({
 name:'drop-down',
 props:{
    title:{
        type:String,
        required:true
    }
 },
 setup(){
    const isOpen = ref(false)
    const toggleOpen=()=>{
        isOpen.value=!isOpen.value
    }
    return{
        isOpen,
        toggleOpen
    }
 }
})
</script>

<style>

</style>